<template>
<div class="team-main">
    <div class="team-top">
        <div class="team-top-main">
            <input/>
            <button>搜索</button>
        </div>
    </div>
    <div class="team-context">
        <div class="team-context-title">
            <div class="team-context-title-block">
                标题
            </div>
            <div class="team-context-title-block">
                类型
            </div>
            <div class="team-context-title-block">
                人数
            </div>
            <div class="team-context-title-block">
                创建时间
            </div>
            <div class="team-context-title-block">
                截止时间
            </div>
        </div>
        <div class="team-context-list" v-for="(item, index) in items" :key="index">
                <div class="team-context-list-block">
                    <span>
                        {{item.title}}
                    </span>
                </div>
                <div class="team-context-list-block">
                    <span>
                        {{item.sku}}
                    </span>
                </div>
                <div class="team-context-list-block">
                    <span>
                        {{item.team}}
                    </span>
                </div>
                <div class="team-context-list-block">
                    <span>
                        {{item.create_time}}
                    </span>
                </div>
                <div class="team-context-list-block">
                    <span>
                        {{item.term_day}}
                    </span>
                </div>
        </div>
    </div>
</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.team-main{
    background-color: white;
    width: 1600px;
    min-height: 400px;
    margin-left: 20px;
    .team-top{
        height: 80px;
        border-bottom: 1px solid rgb(197, 197, 197);
        .team-top-main{
            display: flex;
            align-items: center;
            height: 100%;
            input{
                border: none;
                background-color: rgb(239, 239, 239);
                border-radius: 5px 0 0 5px;
                height: 30px;
                width: 250px;
                margin-left: 20px;
                outline: none;
                padding-left: 20px;
                color: black;
            }
            input:hover{
                background-color: rgb(223, 223, 223);
            }
            button{
                border: none;
                height: 32px;
                border-radius: 0 5px 5px 0;
                cursor: pointer;
            }
            button:hover{
                background-color: rgb(222, 222, 222);
            }
        }
    }
    .team-context{
        .team-context-title{
            display: flex;
            border-bottom: 1px solid rgb(197, 197, 197);
            height: 60px;
            align-items: center;
            .team-context-title-block{
                padding-left: 20px;
                width: 180px;
            }
        }
        .team-context-list{
            height: 60px;
            width: 100%;
            // background-color: rgb(249, 249, 249);
            border-bottom: 1px solid rgb(197, 197, 197);
            display: flex;
            align-items: center;
            .team-context-list-block{
                padding-left: 20px;
                width: 180px;
            }
        }
    }
}
</style>